<template>
   <van-list :loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" offset="300">
      <div class="list-box">
         <ul class="left-box">
            <li class="goods-box" v-for="item in oddList" :key="item.proid">
               <van-image class="img" :src="item.img1" >
            <template v-slot:error>加载失败</template>
          </van-image>
               <p class="van-multi-ellipsis--l2 pname">{{ item.proname }}</p>
               <p>￥{{ item.originprice }}</p>
            </li>
         </ul>
         <ul class="right-box">
            <li class="goods-box" v-for="item in evenList" :key="item.proid">
               <van-image class="img" :src="item.img1" >
            <template v-slot:error>加载失败</template>
          </van-image>
               
               <p class="van-multi-ellipsis--l2 pname">{{ item.proname }}</p>
               <p>￥{{ item.originprice }}</p>
            </li>
         </ul>
      </div>
   </van-list>
<MyTop :size="60" name="home-o" color="skyblue" bgcolor="red"/>
</template>
<script>
import MyTop from './MyTop.vue'
export default {
   components: { MyTop },
   data() {
      return {
         loading: false,//表示是否在发送请求。
         goodslist: [],
         count: 1,
         limitNum: 10,
         finished: false

      }
   },
   computed: {
      oddList: function () {
         //(左侧列) 奇数列的数据
         return this.goodslist.filter((item, index) => index % 2 == 0);
      },
      evenList: function () {
         //(右侧列) 奇数列的数据
         return this.goodslist.filter((item, index) => index % 2 == 1);
      }
   },
   created() {
      this.getImgs();
   },
   methods: {
      onLoad() {
         console.log("onLoad");
         if (this.loading == false || !this.finished) {
            return;
         }
         console.log("发送请求");
         this.count++;
         this.getImgs();
      },
      getImgs() {
         console.log(`请求第${this.count}页数据`);
         this.loading = true;
         this.$http.get("/pro/list", {
            params: {
               count: this.count,
               limitNum: this.limitNum,
            }
         })
            .then(res => {
               this.loading = false;
               //res:时候短响应回来后的所有信息 （如：data是响应的数据，conten-type：内容类型。。。。）
               //res.data:就是后端响应回来的数据
               if (res.data.code === "200") {
                  if (res.data.data.length == 0) {
                     this.finished = true;
                     return;
                  }
                  this.goodslist.push(...res.data.data);
                  // this.goodslist = res.data.data//此处改变了数据，但是 并不能保证渲染完毕
                  console.log("this.$nextTick", this.$nextTick);
                  this.$nextTick(() => {
                     this.loading = false;
                  })
               }
            })
      }
   }

}
</script>
   
<style scoped>
.list-box {
   display: flex;
   justify-content: space-around;

}

.left-box,
.right-box {
   width: 45%;
}

.left-box .img,
.right-box .img {
   width: 100%;
   min-height: 100px;
}

.goods-box {
   border: 1px solid black;
   border-radius: .625rem;
   margin-top: 20px;
}

.pname {
   font-size: 14px;
   line-height: 20px;
}
   /deep/ .van-image img{
  border:1px solid black;
}
</style>